<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <!--skip-->
        <title>EasyRTC Demo: Data Channel File-sharing</title>
        <link rel="stylesheet" type="text/css" href="css/landing.css" />
        <link rel="stylesheet" type="text/css" href="/easyrtc/easyrtc.css" />
        <!--hide-->

        <!-- Prettify Code -->
        <script type="text/javascript" src="js/prettify/prettify.js"></script>
        <link rel="stylesheet" type="text/css" href="js/prettify/prettify.css" />
                <script type="text/javascript" src="js/prettify/loadAndFilter.js"></script>
        <script type="text/javascript" src="js/prettify/jquery.min.js"></script>

        <!--show-->
        <!-- Assumes global locations for socket.io.js and easyrtc.js -->
        <script src="/socket.io/socket.io.js"></script>
        <script type="text/javascript" src="/easyrtc/easyrtc.js"></script>
        <script type="text/javascript" src="/easyrtc/easyrtc_ft.js"></script>
        <script type="text/javascript" src="js/demo_data_channel_filesharing.js"></script>

        <!--hide-->
        <!-- Styles used within the demo -->
        <style type="text/css">
            .alert img {
                float:left;
                padding-right: 10px;
            }

            .peerblock {
                width: 800px;
                border-radius:2px;
                border:1px solid gray;
            }

            .receiveBlock {
                width: 500px;
                margin:10px;
                display: inline-block;
            }
            .dragndrop {
                display: inline-block;
                padding:2em;
                margin: 2px;
                border:2px solid black;
                border-radius: 5px;
            }
            .dragndropStatus {
                display: inline-block;
            }
            .connecting {
                background-color: yellow;
            }
            .usesSockets {
                background-color: pink;
            }
            .notConnected {
                visibility:hidden;
            }
            .connected {
                background-color: #e0ffe0;
            }
            .notConnected:hover {
                margin: 1px;
                border-width: 3px;
            }
            .connected:hover {
                margin: 1px;
                border-width:3px;
            }
            .connectButton {
                padding:2em;
            }

        </style>
        <!--show-->
    </head>
    <body onload="connect()">
        <!--hide-->
        <div id="container">
            <div id="header">
                <a href="index.html"><img id="logo_easyrtc" src="images/easyrtc_logo.png" alt="easyrtc" style="" /></a>
            </div>
            <div id="menu"><a class="menu_link" href="index.html"><div class="menu_item">Local Demos</div></a><a class="menu_link" href="https://github.com/priologic/easyrtc/tree/master/docs"><div class="menu_item">Documentation</div></a><a class="menu_link" href="https://easyrtc.com/forum/"><div class="menu_item">Support: EasyRTC Forums</div></a><a class="menu_link" href="http://www.easyrtc.com/"><div class="menu_item">EasyRTC.com</div></a></div>
            <div id="main">
                <!-- Main Content -->
                <h1>EasyRTC Demo: Data Channel File-sharing</h1>
                <p>This application demonstrates file sharing using the easyrtc.sendData method.
                    It should connect to the server upon start up, and display drag-and-drop areas for other peers.</p>

                <p>To use it, connect to a peer then drop a file into the drag-and-drop area for that peer. The peer should receive it.
                </p>

                <p class="alert"><img alt="Warn" height="32" width="32" src="images/br_status_warn.png" />
                    This demo requires reliable data channels which means it needs Firefox or Chrome (version 32+).
                    In the absence of reliable data channels it will fallback to using websockets to transfer a file.
                    Notice that it uses easyrtc_ft.js as well as easyrtc.js.
                </p>
                <hr />
                <h2>The Demo</h2>
                <!--show-->
                <div id="iam">Obtaining ID...</div><BR />
                <div id="peerZone">
                </div>

                <!--hide-->
                <hr />

                <h2>The Code</h2>
                <h3>HTML</h3>
                <pre  id="prettyHtml" class="prettyprint linenums:1">

                </pre>
                <h3>JavaScript</h3>
                <p>The contents of demo_instant_messaging.js:</p>

                <pre  id="prettyJS" class="prettyprint linenums:1">
                </pre>


                <!-- Runs the SyntaxHighlighter -->
                <script type="text/javascript">
                    loadAndFilter(window.location.href, "prettyHtml",2 );
                    loadAndFilter(getHelperPath("js"), "prettyJS", 2);
                </script>

                <!-- End Main Content -->

            </div>
            <div id="footer">
                <a href="http://www.skedans.com/?from=landing"><img id="logo_priologic" src="images/skedans_logo.png" height="40" width="150" alt="Created By Skedans Systems, Inc." /></a>
                <a href="http://www.easyrtc.com/?from=landing"><img id="logo_pb_easyrtc" src="/easyrtc/img/powered_by_easyrtc.png" height="60" width="200" alt="Powered By EasyRTC" /></a>
                <p><em>&copy; 2016 - Skedans Systems, Inc., All Rights Reserved.</em></p>
                <p id="license">EasyRTC source code released under a BSD2 License. <a href="https://github.com/priologic/easyrtc/blob/master/LICENSE">See LICENSE file in project folder</a> for details.</p>
            </div>

        </div>
        <!--show-->
    </body>
</html>
